import React from "react";
import { Dropdown, Button } from "antd";
import type { MenuProps } from 'antd';
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "../../store";
import { LoginQuitActionCreator } from "../../store/user/userActions";

export const UserInfo = () => {
  const avator = useSelector((state: RootState) => state.user.avator);
  const nickname = useSelector((state: RootState) => state.user.nickname);
	const dispatch = useDispatch()
  const items = [
    {
      key: "1",
      label: "个人中心",
    },
    {
      key: "2",
      label: "修改密码",
    },
    {
      key: "3",
      label: "更改头像",
    },
    {
      key: "4",
      label: "退出登录",
    },
  ];

	const onClick: MenuProps['onClick'] = ({ key }) => {
		switch(key) {
			case '1':
			case '2':
			case '3':
				return;
			case '4':
				// 退出登录
				// 清除用户数据
				dispatch(LoginQuitActionCreator())
		}
	};

  return (
    <div>
      <img src={avator} alt="" style={{ marginRight: 10 }}/>
      <Dropdown
        menu={{ items, onClick }}
        placement="bottom"
        arrow={{ pointAtCenter: true }}
      >
        <Button>{nickname}</Button>
      </Dropdown>
    </div>
  );
};
